<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/tuo.css">
    <style>
        *{
            margin: 0;
            padding: 0;
            text-decoration: none;
            list-style: none;
        }
    </style>
</head>
<body>
    <div class="warp">
        <header>
            <nav>
                <div class="logo">
                  <h4>Back</h4>  
                </div>
                <div class="search">
                   <p>分类</p>
                </div>
                <div class="area">
                    <select name="" id="">
                        <option value="">广州市</option>
                        <option value="">深圳市</option>
                        <option value="">东莞市</option>
                        <option value="">佛山市</option>
                    </select>
                    <i class="iconfont icon-xiajiantou"></i>
                </div>
            </nav>
            <div class="banner">
                <div class="box1">
                    <img src="./images/pc项目/分类/分类_13.png" alt="">
                    <p>美食</p>
                </div>
                <div class="box1">
                    <img src="./images/pc项目/分类/分类_08.png" alt="">
                    <p>电影</p>
                </div>
                <div class="box1">
                    <img src="./images/pc项目/分类/分类_03.png" alt="">
                    <p>运动</p>
                </div>
                <div class="box1">
                    <img src="./images/pc项目/分类/分类_05.png" alt="">
                    <p>唱歌</p>
                </div>
               
            </div>
            <div class="box2">
                <div class="box3"></div>
                <div class="box3"></div>
                <div class="box3"></div>
                <div class="box3"></div>
            </div>
        </header>
        <main>
            <div class="boox">
                <div class="top1">
                    <div class="top2">
                        <h4><i class="iconfont icon-daochu1024-07"></i>美食类</h4>
                    </div>
                    <div class="top3">
                        <h4>更多 <i class="iconfont icon-youjiantou-"></i></h4>
                    </div>
                </div>
                <div class="top4">
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_20.png" alt="">
                    </div>
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_23.png" alt="">
                    </div>
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_26.png" alt="">
                    </div>
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_29.png" alt="">
                    </div>
                    
                </div>
            </div>
            <div class="boox1">
                <div class="top1">
                    <div class="top2">
                        <h4><i class="iconfont icon-daochu1024-07"></i>运动类</h4>
                    </div>
                    <div class="top3">
                        <h4>更多 <i class="iconfont icon-youjiantou-"></i></h4>
                    </div>
                </div>
                <div class="top4">
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_40.png" alt="">
                    </div>
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_41.png" alt="">
                    </div>
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_42.png" alt="">
                    </div>
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_43.png" alt="">
                    </div>
                    
                </div> 
            </div>
            <div class="boox2">
                <div class="top1">
                    <div class="top2">
                        <h4><i class="iconfont icon-daochu1024-07"></i>电影类</h4>
                    </div>
                    <div class="top3">
                        <h4>更多 <i class="iconfont icon-youjiantou-"></i></h4>
                    </div>
                </div>
                <div class="top4">
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_53.png" alt="">
                    </div>
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_54.png" alt="">
                    </div>
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_56.png" alt="">
                    </div>
                    <div class="sun">
                        <img src="./images/pc项目/分类/分类_57.png" alt="">
                    </div>
                    
                </div> 
            </div>
        </main>
        <footer>
            <div class="foot">
                <div class="font1">
                    <i class="iconfont icon-shouye"></i>
                    <p><a href="./index.html">首页</a></p>
                </div>
                <div class="font1">
                    <i class="iconfont icon-fenlei"></i>
                    <p><a href="./tao.html">分类</a></p>
                </div>
                <div class="font1">
                    <i class="iconfont icon-faxianjihuo"></i>
                    <p><a href="./tuo.html">发现</a></p>
                </div>
                <div class="font1">
                    <i class="iconfont icon-wode"></i>
                    <p><a href="./text.html">我的</a></p>
                </div>
            </div>
        </footer>
      </div>  
</body>
</html>